home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap23 / dun23_3.txt < prev    next >
Encoding:
Text File  |  1997-12-18  |  2.3 KB  |  62 lines
  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>Walk The Dog</title>
  6.  
  7. </head>
  8.  
  9. <body bgcolor="white">
  10.  
  11. <script language="JavaScript1.2">
  12.  
  13. <!--//
  14.  
  15.  
  16.  
  17. //first off, the page sets itself to capture the
  18.  
  19. //MOUSEDOWN event and route it to the moveLayer handler
  20.  
  21.  
  22.  
  23. window.captureEvents(Event.MOUSEDOWN);
  24.  
  25. window.onmousedown = moveLayer;
  26.  
  27.  
  28.  
  29.  
  30.  
  31. //The moveLayer function takes the mousedown event, and throws
  32.  
  33. //where the user clicked to the slideTo function.  It also moves
  34.  
  35. //the cartoon style 'blurb' layer to where the mouse was clicked,
  36.  
  37. //changing it to visible, and releases the MOUSEDOWN event.
  38.  
  39.  
  40.  
  41. function moveLayer(e) {
  42.  
  43.    slideTo(document.layers['slider'], e.pageY, e.pageX);
  44.  
  45.    document.layers['blurb'].moveTo(e.pageX, e.pageY);
  46.  
  47.    document.layers['blurb'].visibility = true;
  48.  
  49.    window.releaseEvents(Event.MOUSEDOWN);
  50.  
  51. }
  52.  
  53.  
  54.  
  55. //the only thing added to this iteration of the sliderTo function
  56.  
  57. //was and 'else' block, that hides the 'blurb' layer, then re-enables
  58.  
  59. //capturing of the MOUSEDOWN event.  The reason I release the event
  60.  
  61. //is to avoid confusing the script by recursively calling the slideTo
  62.  
  63. //function with different coordinates.
  64.  
  65.  
  66.  
  67. function slideTo(targetLayer, targetTop, targetLeft) {
  68.  
  69.    if((targetLayer.top != targetTop) || (targetLayer.left != targetLeft)) {
  70.  
  71.       if (targetLayer.top < targetTop) targetLayer.top = targetLayer.top  + 1;
  72.  
  73.       if (targetLayer.top > targetTop) targetLayer.top = targetLayer.top  - 1;
  74.  
  75.       if (targetLayer.left < targetLeft) targetLayer.left = targetLayer.left  + 1;
  76.  
  77.       if (targetLayer.left > targetLeft) targetLayer.left = targetLayer.left  - 1;
  78.  
  79.       setTimeout('slideTo(document.layers["'+targetLayer.name+'"],'+targetTop+','+targetLeft+')',1);
  80.  
  81.    } else {
  82.  
  83.       window.captureEvents(Event.MOUSEDOWN);
  84.  
  85.       document.layers['blurb'].visibility = false;
  86.  
  87.   }
  88.  
  89. }
  90.  
  91. //-->
  92.  
  93. </script>
  94.  
  95. <body bgcolor="white">
  96.  
  97.  
  98.  
  99. <!-- the 'slider' layer hold the picture of the puppy -->
  100.  
  101. <layer z-index=2 id="slider" height=50 width=50 top=0 left=0>
  102.  
  103. <img src="puppy.gif" border=0 height=50 width=50>
  104.  
  105. </layer>
  106.  
  107. <!-- the 'blurb' layer is invisible until the user clicks on the page -->
  108.  
  109. <!-- when it is moved to the spot clicked, and shown -->
  110.  
  111.  
  112.  
  113. <layer z-index=1 visibility=hide id="blurb" width=50 height=50 top=100 left=100>
  114.  
  115. <img width=50 height=50 src="cartoon.gif">
  116.  
  117. </layer>
  118.  
  119. </body>
  120.  
  121. </html>
  122.  
  123.